<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>

<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>라이브러리</title>
<!--모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png" />
<!-- bootstrap -->
<link rel="stylesheet" type="text/css"
	href="assets/css/bootstrap.min.css" />
<!--나눔고딕 웹 폰트 적용 -->
<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
<!--반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/nonresponsive.css" /> -->
<!--IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->
<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->
	<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />

<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
}

body, h1, h3, ul, li {
	padding: 0px;
	margin: 0px;
}

li {
	display: inline-block;
	list-style-type: none;
	margin-left: 5px;
}

a:hover {
	text-decoration: none;
}

/************************/
/* 네비 					*/
/************************/
nav.navbar {
	line-height: 50px;
	background-color: #FF8A00;
	border-bottom: 1px solid #4F2B00;
}

.nav_content {
	position: relative;
	max-width: 737px;
	margin: auto;
	padding-left: 5px;
	padding-right: 5px;
}

.nav_menu_btn {
	width: 50px;
	position: absolute;
	top: 0px;
	left: 5px;
	font-size: 25px;
}

.page_title {
	font-size: 20px;
	color: #FFFFFF;
}

.back_btn {
	color: #FFFFFF;
}

.back_btn:hover {
	color: #333;
}

/************************/
/* 리스트 				*/
/************************/
.panel-group {
	padding-top: 52px;
}

.list_box_style {
	border-radius: 0px !important;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #BAB8B6;
}

.list-header {
	line-height: 40px;
	background-color: #D8F6FF;
	border-bottom: 1px dotted #BAB8B6;
}

.list-top {
	max-width: 737px;
	margin: auto;
	padding-left: 5px;
	padding-right: 5px;
}

.top-text-style {
	position: relative;
	top: 1px;
}

.panel-heading {
	max-width: 737px;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #ffffff !important;
}

.panel-collapse {
	background-color: #F5F2F5;
	border-top: 1px dotted #BAB8B6;
}

.panel-body {
	max-width: 737px;
	margin: auto;
	padding: 5px;
	border-top: none !important;
}

.margin-left-10 {
	margin-left: 10px;
}

.icon_style {
	position: relative;
	top: -2px;
	margin-right: 2px;
}
</style>
</head>

<body>

	<!-- 상단 해더 바 -->
	<nav class="navbar navbar-fixed-top" role="navigation">
		<div class="nav_content text-center">
			<div class="nav_menu_btn pull-left text-center">
				<a class="back_btn" onclick="history.back();"><i class="fa fa-arrow-left"></i></a>
			</div>
			<span class="page_title"><strong>경로 라이브러리</strong></span>
		</div>
	</nav>
	<!-- 상단 해더 끝 -->
	
	<div id="test" class="panel-group"></div>

	<!--Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script id="android"></script>
	<script type="text/javascript">
		var userBrowser = navigator.userAgent.toLowerCase();
	
		if (userBrowser.indexOf("android") != -1){
			$('#android').attr("src", "assets/js/cordova.js");
			
			document.addEventListener("deviceready", onDeviceReady, false);
			
			function onDeviceReady() {
				// Web DB 실행
				var dbSize = 1 * 1024 * 1024;
				var journeyAlDB = openDatabase("JourneyAlDB", "1.0", "내 루트 알람DB", dbSize);
				
					journeyAlDB.transaction(function(tx) {
						tx.executeSql("SELECT key, is_al, al_info FROM JourneyAlDB" , [], function(tx, rs) {
							for (var i=0; i < rs.rows.length; i++) {
								var input = '<input type="hidden" id="is_al_';
								input += rs.rows.item(i).key;
								input += '" value="';
								input += rs.rows.item(i).is_al;
								input += '">';
								input += '<input type="hidden" id="al_info_';
								input += rs.rows.item(i).key;
								input += '" value="';
								input += rs.rows.item(i).al_info;
								input += '">';
								$('body').append(input);
							}
						});
					});
					
					var t = '';
					for (var j = 0; j < localStorage.length; j++) {
						var key = localStorage.key(j);
						var response = JSON.parse(localStorage[key]);
						var time = new Date(key.substring(13, 26));

						t += 		'<div class="panel panel-default list_box_style">';
						t += 			'<div class="list-header">';
						t +=				'<div class="list-top">';
						t += 					'<span class="label label-info">'+'</span>';
						t +=					'<span class="top-text-style"> 출발시간: <strong> ' + response.departure_time.text + '</strong></span>';
						t +=					'<span class="top-text-style"> 도착시간: <strong> ' + response.arrival_time.text + '</strong></span>';
						t +=					'<span class="text-danger top-text-style"><strong> 소요시간: ' + Math.ceil(response.duration.value / 60) + '분 </strong></span>';
						t +=				'</div>';
						t += 			'</div>';
						t += 			'<div class="panel-heading">';
						t +=				'<h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse' + j + '">';
						t += 					'<div class="list">';

						for (var i = 0; i < response.steps.length; i++) {
							if (response.steps[i].travel_mode == "TRANSIT") {
								t += '<img style="height: 20px; width: 20px" src="'
									+ response.steps[i].transit.line.vehicle.icon
									+ '">';
								if (response.steps[i].transit.line.short_name != null) {
									t += '<span style="background-color:'
										+ response.steps[i].transit.line.color 
										+ ';padding:0 4px;color:#ffffff">'
											+ response.steps[i].transit.line.short_name
											+ '</span>';
									t += response.steps[i].transit.departure_stop.name;
								} else if (response.steps[i].transit.line.short_name == null) {
									t += '<span style="background-color:'
									+ '#d24999' 
									+ ';padding:0 4px;color:#ffffff">'
											+ response.steps[i].transit.line.name
											+ '</span>';
								}
								t += 				' <i class="fa fa-caret-right"></i> ';
								t +=				 response.steps[i].transit.arrival_stop.name;
								var dura = Math.ceil(response.steps[i].duration.value / 60);
								t += 				'<span class="text-muted">[약 '+dura+'분]</span>';
								if (i != ((response.steps.length) - 1)) {
									t += 			'<br /><br />';
								}
								// t +=
								// response.steps[i].transit.line.vehicle.type;
							} else {
								t += '<img style="height: 20px; width: 20px" src="https://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';	
								
								if (i == ((response.steps.length) -1)) {
									t += response.end_address;
								}else {
									t += 					response.steps[i].instructions;
								}
								t += '<span class="text">까지 도보</span>';
								
								var dura = Math.ceil(response.steps[i].duration.value / 60);
								t += 				'<span class="text-muted">[약 '+dura+'분]</span>';
								if (i != ((response.steps.length) - 1)) {
									t += 			'<br /><br />';
								}
							}

							if (i == (response.steps.length) - 1 && response.steps.length != 1) {
								t += 			'</div>';
							}
						};
						
						t += '</a></h4></div>';
						t += '<div id="collapse' + j
							+ '" class="panel-collapse collapse">';
						t += '<div class="panel-body">';
						t += '<div class="pull-right"><button class="list-btn1 btn btn-info" ';
						t += 'onclick="location.href = ';
						t += '\'journey.jsp?';
						t += 'start=' + response.start_location.nb + ","
								+ response.start_location.ob;
						t += '&end=' + response.end_location.nb + ","
								+ response.end_location.ob;
						t += '&time=' + time.getTime() / 1000;
						t += '&journey=' + key.substring(26, 27);
						t += '\';return false;">지도보기</button>';
						t += '<button id="rselect" class="rselect list-btn2 btn btn-warning margin-left-10" value="' + key + '">경로선택</button>';
						t += '</div></div></div>';
					};
					$('#test').html(t);
					
					

					$(Document).on('click', '.rselect', function() {
						var check = 0;
						var time = new Date();
						var key = time.getTime() + '' + $(this).val().substring(13, 27);
						var is_al = $('#is_al_' + $(this).val()).val();
						var al_info = $('#al_info_' + $(this).val()).val();
						localStorage[key] = localStorage[$(this).val()];
						sessionStorage["journey_key"] = key;
						
						var dkey = $(this).val();

						// 웹DB 입력
						journeyAlDB.transaction(function(tx) {
							tx.executeSql("INSERT INTO journeyAlDB(key, is_al, al_info) VALUES (?,?,?)",
								[key, is_al, al_info],
								function() {
									check++;
									if (check == 2) {
										location.href = "rout.jsp";
									}
								},
								function(tx, e) {
									console.log(e.message);
								});
						});

						// 웹DB 삭제
						journeyAlDB.transaction(function(tx) {
							tx.executeSql("DELETE FROM journeyAlDB WHERE key=?",
								[dkey],
								function() {
									check++;
									if (check == 2) {
										location.href = "rout.jsp";
									}
							},
								function(tx, e) {
								console.log(e.message);
							});
						});

						localStorage.removeItem($(this).val());
					});
			}
		} else {
			// Web DB 실행
			var dbSize = 1 * 1024 * 1024;
			var journeyAlDB = openDatabase("JourneyAlDB", "1.0", "내 루트 알람DB", dbSize);

			$(function() {
				journeyAlDB.transaction(function(tx) {
					tx.executeSql("SELECT key, is_al, al_info FROM JourneyAlDB" , [], function(tx, rs) {
						for (var i=0; i < rs.rows.length; i++) {
							var input = '<input type="hidden" id="is_al_';
							input += rs.rows.item(i).key;
							input += '" value="';
							input += rs.rows.item(i).is_al;
							input += '">';
							input += '<input type="hidden" id="al_info_';
							input += rs.rows.item(i).key;
							input += '" value="';
							input += rs.rows.item(i).al_info;
							input += '">';
							$('body').append(input);
						}
					});
				});
				
				var t = '';
				for (var j = 0; j < localStorage.length; j++) {
					var key = localStorage.key(j);
					var response = JSON.parse(localStorage[key]);
					var time = new Date(key.substring(13, 26));

					t += 		'<div class="panel panel-default list_box_style">';
					t += 			'<div class="list-header">';
					t +=				'<div class="list-top">';
					t += 					'<span class="label label-info">'+'</span>';
					t +=					'<span class="top-text-style"> 출발시간: <strong> ' + response.departure_time.text + '</strong></span>';
					t +=					'<span class="top-text-style"> 도착시간: <strong> ' + response.arrival_time.text + '</strong></span>';
					t +=					'<span class="text-danger top-text-style"><strong> 소요시간: ' + Math.ceil(response.duration.value / 60) + '분 </strong></span>';
					t +=				'</div>';
					t += 			'</div>';
					t += 			'<div class="panel-heading">';
					t +=				'<h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse' + j + '">';
					t += 					'<div class="list">';

					for (var i = 0; i < response.steps.length; i++) {
						if (response.steps[i].travel_mode == "TRANSIT") {
							t += '<img style="height: 20px; width: 20px" src="'
								+ response.steps[i].transit.line.vehicle.icon
								+ '">';
							if (response.steps[i].transit.line.short_name != null) {
								t += '<span style="background-color:'
									+ response.steps[i].transit.line.color 
									+ ';padding:0 4px;color:#ffffff">'
										+ response.steps[i].transit.line.short_name
										+ '</span>';
								t += response.steps[i].transit.departure_stop.name;
							} else if (response.steps[i].transit.line.short_name == null) {
								t += '<span style="background-color:'
								+ '#d24999' 
								+ ';padding:0 4px;color:#ffffff">'
										+ response.steps[i].transit.line.name
										+ '</span>';
							}
							t += 				' <i class="fa fa-caret-right"></i> ';
							t +=				 response.steps[i].transit.arrival_stop.name;
							var dura = Math.ceil(response.steps[i].duration.value / 60);
							t += 				'<span class="text-muted">[약 '+dura+'분]</span>';
							if (i != ((response.steps.length) - 1)) {
								t += 			'<br /><br />';
							}
							// t +=
							// response.steps[i].transit.line.vehicle.type;
						} else {
							t += '<img style="height: 20px; width: 20px" src="https://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';	
							
							if (i == ((response.steps.length) -1)) {
								t += response.end_address;
							}else {
								t += 					response.steps[i].instructions;
							}
							t += '<span class="text">까지 도보</span>';
							
							var dura = Math.ceil(response.steps[i].duration.value / 60);
							t += 				'<span class="text-muted">[약 '+dura+'분]</span>';
							if (i != ((response.steps.length) - 1)) {
								t += 			'<br /><br />';
							}
						}

						if (i == (response.steps.length) - 1 && response.steps.length != 1) {
							t += 			'</div>';
						}
					};
					
					t += '</a></h4></div>';
					t += '<div id="collapse' + j
						+ '" class="panel-collapse collapse">';
					t += '<div class="panel-body">';
					t += '<div class="pull-right"><button class="list-btn1 btn btn-info" ';
					t += 'onclick="location.href = ';
					t += '\'journey.jsp?';
					t += 'start=' + response.start_location.nb + ","
							+ response.start_location.ob;
					t += '&end=' + response.end_location.nb + ","
							+ response.end_location.ob;
					t += '&time=' + time.getTime() / 1000;
					t += '&journey=' + key.substring(26, 27);
					t += '\';return false;">지도보기</button>';
					t += '<button id="rselect" class="rselect list-btn2 btn btn-warning margin-left-10" value="' + key + '">경로선택</button>';
					t += '</div></div></div>';
				};
				$('#test').html(t);
				
				

				$(Document).on('click', '.rselect', function() {
					var check = 0;
					var time = new Date();
					var key = time.getTime() + '' + $(this).val().substring(13, 27);
					var is_al = $('#is_al_' + $(this).val()).val();
					var al_info = $('#al_info_' + $(this).val()).val();
					localStorage[key] = localStorage[$(this).val()];
					sessionStorage["journey_key"] = key;
					
					var dkey = $(this).val();

					// 웹DB 입력
					journeyAlDB.transaction(function(tx) {
						tx.executeSql("INSERT INTO journeyAlDB(key, is_al, al_info) VALUES (?,?,?)",
							[key, is_al, al_info],
							function() {
								check++;
								if (check == 2) {
									location.href = "rout.jsp";
								}
							},
							function(tx, e) {
								console.log(e.message);
							});
					});

					// 웹DB 삭제
					journeyAlDB.transaction(function(tx) {
						tx.executeSql("DELETE FROM journeyAlDB WHERE key=?",
							[dkey],
							function() {
								check++;
								if (check == 2) {
									location.href = "rout.jsp";
								}
						},
							function(tx, e) {
							console.log(e.message);
						});
					});

					localStorage.removeItem($(this).val());
				});

			});
		}
	</script>
</body>
</html>